<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>


</template>

<script setup>
// import { View, Map, TileLayer, OSM, fromLonLat } from 'ol';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';

import { onMounted, ref } from 'vue'
var tdtUrl = 'https://t1.tianditu.gov.cn/';
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
onMounted(async () => {
  // 天地图信息
  const map = new Map({
    target: 'openlayersContainer',
    view,
    layers: [
      tdtLayer, tdtnameLayer
    ],
  });
  map.addLayer(vectorLayer);

  vectorSource.on('change', (e) => {
    // console.log(vectorSource.getFeatures());
  })

  map.on('pointermove', (e) => {
    // 获取当时鼠标的坐标
    const coordinates = e.coordinate
    // 找到当前鼠标位置是否具有要素信息
    const features = vectorSource.getFeaturesAtCoordinate(coordinates);
    const allFeatures = vectorSource.getFeatures();
    allFeatures.forEach(feature => {
      feature.setStyle(
        new Style({
          stroke: new Stroke({
            color: 'red',
            width: 1,
          }),
          fill: new Fill({
            color: 'rgba(255, 0, 0, 0.2)',
          }),
        })
      )
    })
    vectorLayer.setStyle(new Style({
      stroke: new Stroke({
        color: 'red',
        width: 1,
      }),
      fill: new Fill({
        color: 'rgba(255, 0, 0, 0.2)',
      }),
    }))
    if (features[0]) {
      features[0].setStyle(
        new Style({
          fill: new Fill({
            color: 'rgba(0,255,0,0.5)',
          }),
        }))
    }
  })

})
const view = new View({
  center: [114.3165, 30.5264],
  zoom: 5,
  maxZoom: 18,
  minZoom: 5,
  projection: 'EPSG:4326'
})

const tdtSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
  //引入高德地图
})
const tdtnameSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + token,
})
const tdtnameLayer = new TileLayer({
  source: tdtnameSourse
})

const tdtLayer = new TileLayer({
  source: tdtSourse
})
const vectorSource = new VectorSource({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
  //处理对应的数据格式
  format: new GeoJSON(),
})

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 1,
    }),
    fill: new Fill({
      color: 'rgba(255, 0, 0, 0.2)',
    }),
  }),
})


</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
